import React from "react";
import Style from './lInput.module.css';
import PropTypes from "prop-types";
import { createRef } from "react";


export default class LInput extends React.Component {
  constructor(props) {
    super(props)

    this.input = createRef()
  }
  state = {
    value: ''
  }

  static propTypes = {
    handleOnKeyUpEnter: PropTypes.func,
    handleOnInput: PropTypes.func,
    style: PropTypes.object
  }

  reset = () => {
    this.setState({
      value: ''
    })
    this.input.current.value = ''
  }

  handleKeyUp = (event) => {
    const {key, target} = event
    this.setState({
      value: target.value
    })
    if(key === 'Enter') {
      if(typeof this.props.handleOnKeyUpEnter === 'function') {
        this.props.handleOnKeyUpEnter(event, target.value)
      }
    }
  }

  render() {
    return (
      <div className={Style.lInput} style={this.props.style}>
        <span
          className={Style.prefixIcon}
        ></span>
        {
          typeof this.props.handleOnInput === 'function' ? 
            <input ref={this.input} className={Style.lInputInner} onKeyUp={this.handleKeyUp} onInput={this.props.handleOnInput} /> : 
            <input ref={this.input} className={Style.lInputInner} onKeyUp={this.handleKeyUp} />
        }
        <span className={Style.suffixIcon}></span>
      </div>
    )
  }
}